<template>
	<block>
		<view class="box">
			<view class="back">
			</view>
			<uni-steps :options="options" active="4"></uni-steps>

			<view class="cont" style="margin-top: 30rpx;">
				<view class="head">
					<text class="textOver" style="font-size: 30rpx;">{{shopInfo.storeName}}</text>

				</view>
				<view class="line"></view>
				<view class="contBot" style="padding: 18rpx 24rpx;">
					<view style="margin-bottom: 45rpx;height: 135rpx;">
						<view class="leftImg">
							<image :src="imgapi+params.avatar" mode=""></image>
							<!-- <text v-if="!item.alone">{{item.people}}人团</text> -->
						</view>
						<view class="rightCont">
							<view class="textOver" style="font-size: 35rpx;">{{params.title}}</view>
							<!-- <view class="person" v-if="!item.alone">{{item.people}}人套餐</view> -->
							<view class="contPrice">
								<!-- textDesc -->
								<view class="price ">
									<text
										v-if="params.originalPrice != params.showPrice">￥{{params.originalPrice}}</text>
									<!-- <text>￥{{params.originalPrice}}</text> -->
								</view>

							</view>
						</view>
					</view>

					<block v-if="params.hasSpec==1">
						<!-- 单独买且有规格 :class="[item.alone&&item.hasSpec!=1?'':'lineAlone']"-->
						<view class="line" style="margin: 45rpx 0 30rpx;"></view>
						<view class="bottom bot">
							<text class="tit">规格</text>
							<uni-tag size="small" circle type="warning" :text="params.specName"></uni-tag>
						</view>
					</block>
					<block>
						<view class="line" style="margin: 35rpx 0 30rpx;"></view>
						<view class="bottom cot">
							<text class="tit">单价</text>
							<view class="">
								<uni-tag size="small" type="warning" text="拼单价"></uni-tag>
								<view class=""
									style="color:#d94e2e ;font-weight: bold;font-size: 30rpx;display: inline-block;">
									<text class="littleMon">￥</text>
									<text style="font-size: 35rpx;">{{params.showPrice}}/{{params.unit}}</text>
								</view>
							</view>
						</view>
					</block>
					<!-- 单独买且无规格 -->
					<view class="line" style="margin: 35rpx 0 30rpx;"></view>
					<view class="bottom">
						<text class="tit">数量</text>
						<!-- 加减 -->
						<view style="width: 32%; display: flex;justify-content: flex-end;">
							<!-- <numSelect model="1" @getValue="count" @addNum="add" @minusNum="minus" color="#9cd53f"
								:value="params.count" :size="50"></numSelect> -->
							<view class="" v-if="params.numSelect!=0">{{params.numSelect}}{{params.unit}}</view>
							<view class="">x{{params.count}}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="cont" v-if="params.packBuy != 0">
				<view class="head">
					<text class="textOver" style="font-size: 30rpx;">个人地址</text>
				</view>
				<view class="plotAddressBorder between  center_vertical" @tap="getaddress" style="margin-top: 0;">
					<view>
						<image src="../../static/images/home/weizhi.png" class="icon_next" mode=""></image>
						<text style="margin-left: 10rpx;font-size: 32rpx;color: #a3a3a3;">{{getAddress}}</text>
					</view>
					<view>
						<image src="../../static/images/mine/icon_next.png" class="icon_next"></image>
					</view>
				</view>
			</view>

			<view class="cont">
				<view class="head">
					<text class="textOver" style="font-size: 30rpx;">价格明细</text>
				</view>
				<view class="plotAddressBorder between  center_vertical" style="margin-top: 0;border:none">
					<view>
						<text class="tit">商品总价</text>
						<text
							class="tit tips">共{{params.numSelect == 0?params.count:params.numSelect*params.count}}件宝贝</text>
					</view>
					<view>
						<text class="littleMon">￥</text>
						<text class="price">{{totalPrice}}</text>
					</view>
				</view>
				<view class="plotAddressBorder between  " style="margin-top: 0;border:none" v-if="params.nowGear!=0">
					<view>
						<view class="">
							<text class="iconfont icon-dianpufill"></text>
							<text class="tit">店铺优惠</text>
							<text class="tit tips">买够{{params.nowGear+params.unit}}</text>
						</view>
						<view class="introTit">
							<view style="margin-left: 10rpx" v-if="params.showTit !== 1 && params.showTit !== 0 ">
								若任意用户再买<text class="introColor">{{params.poorNum}}</text>{{params.unit}}，
								每件返<text class="introColor">{{params.backMoney}}</text> 元
								<text class="introColor">总返
									{{Math.floor((params.count * params.backMoney) * 100) / 100}}</text> 元
							</view>
							<view class="" v-if="params.showTit===1">
								已是最优惠价格，累计帮您节省<text
									class="introColor">{{Math.floor((params.maxDiscounts * params.count) * 100) / 100}}</text>元
							</view>
						</view>
					</view>
				</view>
				<view class="plotAddressBorder between  center_vertical" style="margin-top: 0;border:none"
					v-if="params.showArea == 1">
					<view>
						<text class="iconfont icon-yunfei"></text>
						<text class="tit">运费</text>
						<text class="tit tips">{{params.area}}</text>
					</view>
					<view v-if="params.packBuy!=3">
						<text class="littleMon">{{params.hasFreeShipp==-1?"￥":""}}</text>
						<text class="price">{{params.hasFreeShipp==-1?params.postage:"包邮"}}</text>
					</view>
					<view v-if="params.packBuy==3">						
						<text class="price">专人免费配送</text>
					</view>
				</view>
				<view v-if="params.showArea == 1">

				</view>
				<view class="plotAddressBorder between  center_vertical" style="margin-top: 0;border:none">
					<view>
						<text class="tit">合计</text>
					</view>
					<view>
						<text class="littleMon">￥</text>
						<text class="price">{{changeTotalPrice}}</text>
					</view>
				</view>
			</view>



			<view class="cont">
				<view class="head">
					<text class="textOver" style="font-size: 30rpx;">支付方式</text>
				</view>
				<view class="contBot" style="padding: 18rpx 24rpx;margin-top: -30rpx;">
					<radio-group name="pay" @change="payWay">
						<view class="plotAddressBorder between">
							<view class="center_vertical">
								<view>
									<image
										src="https://www.tdtye.com/files/vegetable_mall_file/default/static/growVegetables/pay_icon.png"
										class="icon"></image>
								</view>
								<view>
									微信支付
								</view>
							</view>
							<view>
								<radio value="wechat" />
							</view>
						</view>
						<view class="plotAddressBorder between">
							<view class="center_vertical">
								<view>
									<image
										src="https://www.tdtye.com/files/vegetable_mall_file/default/static/growVegetables/wallet_icon.png"
										class="icon">
									</image>
								</view>
								<view>
									余额支付
								</view>
							</view>
							<view>
								<radio value="balance" />
							</view>
						</view>
					</radio-group>
				</view>
			</view>

		</view>

		<view class="footer">

			<view class="bottomPrice">
				<view class="total">
					合计: <text>￥{{changeTotalPrice}}</text>
				</view>
				<button @tap="subOrder" type="warn" class="btnPop">提交订单</button>
			</view>
		</view>
	</block>

</template>

<script>
	import cartcontrol from '@/components/cartcontrol.vue'
	import Skeleton from '@/components/ls-skeleton/ls-skeleton.nvue';
	import hqsPopup from "@/components/hqs-popup/hqs-popup.vue"
	import numSelect from '@/pageA/uni_modules/poiuy-numSelect/numSelect.vue'
	export default {
		components: {
			cartcontrol,
			Skeleton,
			hqsPopup,
			numSelect,
		},
		data() {
			return {

				options: [{
						title: '原价或优惠价购买'
					}, {
						title: '等待其他用户购买 '
					},
					{
						title: '购买进度达标'
					}, {
						title: '当天结算'
					}, {
						title: '系统自动返现'
					}
				],
				amount: null,
				imgapi: '',

				getAddress: '请选择您的收货地址',
				province: '',
				city: '',
				area: '',
				address: '',
				name: '',
				phone: '',

				form: {
					id: "",
					amount: 0.0,
					img: [],
					remark: "",
					payWay: ""
				},
				totalPrice: 0,
				changeTotalPrice: 0, //处理后的总价

				item: {}, //详情信息
				shopInfo: {}, //商家信息

				url: '',
				params: {
					area: '', //不包邮区域
					showArea: 0, //展示 区域   1:展示
					postage: 0, //邮费
				},
				limitList: [], //限购区域
				checkArea: 0,
			}
		},
		onLoad(e) {
			this.imgapi = this.$reqConfig.URLIMAGE
			this.params = JSON.parse(e.params)
			this.shopInfo = JSON.parse(e.shopInfo)
			console.log("传过来的参数 : ", this.params);
			if (this.params.numSelect == 0) {
				this.totalPrice = (this.params.count * this.params.showPrice).toFixed(2)
				this.changeTotalPrice = (this.params.count * this.params.showPrice).toFixed(2)
			} else {
				this.totalPrice = (this.params.count * this.params.numSelect * this.params.showPrice).toFixed(2)
				this.changeTotalPrice = (this.params.count * this.params.numSelect * this.params.showPrice).toFixed(2)
			}
		},
		onBackPress(e) {
			// 小程序不执行
			console.log('123213', e);
			uni.switchTab({
				url: './mineInfo'
			});
			return true
		},

		methods: {
			fanXian() {
				return this.params.numSelect == 0 ? this.params.count : (this.params.numSelect * this.params.count) * this
					.params.backMoney
			},
			payWay(e) {
				console.log(e.detail.value)
				this.form.payWay = e.detail.value
			},
			getaddress() {
				let that = this
				wx.chooseAddress({
					success(res) {
						let response = res
						console.log("自选地址", res);
						if (that.params.packBuy === 3) {
							that.$axios({
								url: `user/public/goodsAreaHasUser`,
								method: 'post',
								data: {
									city: response.countyName,
									goodsId: that.params.groupGoodsId,
								}
							}).then((res) => {
								if (res.code !== 0) {
									console.log("校验区域失败")
									return
								}
								if (!res.result) {
									console.log("请重选区域")
									that.checkArea = 2
									return
								}
								that.checkArea = 1
							})
						}
						that.province = res.provinceName
						that.city = res.cityName
						that.area = res.countyName
						that.address = res.detailInfo
						that.name = res.userName
						that.phone = res.telNumber
						that.getAddress = that.province + that.city + that.area + that.address
						// 邮费
						that.params.area = res.countyName
						that.params.showArea = 1
						if (that.params.hasFreeShipp == -1 && that.params.packBuy === 1) {
							that.$axios({
								url: `user/usGroupGoodsOrder/confirm`,
								method: "post",
								data: {
									id: that.params.freightId,
								}
							}).then((res) => {
								that.limitList = res.result.areaList
								let index = that.limitList.findIndex(val => val == that.params.area)
								if (index == -1) {
									// 没找到
									that.params.postage = res.result.defaultPrice
								} else {
									that.params.postage = res.result.areaPrice
								}
								that.changeTotalPrice = that.totalPrice * 1 + that.params.postage * 1
							})
						}
					}
				})
			},
			count(e) {

				//保留2位
				this.totalPrice = (e * this.params.showPrice).toFixed(2)

			},
			add(e) {
				console.log('加', e)
			},
			minus(e) {
				console.log('减', e)
			},

			subOrder() {
				let t = this
				if (this.params.count == 0) {
					uni.showToast({
						title: "请输入数量",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (!this.province && this.params.packBuy != 0) {
					uni.showToast({
						title: "请选择收货地址",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (!this.form.payWay) {
					uni.showToast({
						title: "请选择支付方式",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.form.payWay === 3 && t.checkArea !== 1) {
					uni.showToast({
						title: t.checkArea === 0 ? "校验配送区域失败,请尝试重选收货地址" : "该地址不支持配送,请重新选择",
						icon: "none",
						duration: 2000
					})
					return
				}
				this.url = "user/usGroupGoodsOrder/groupSubOrder"
				uni.showLoading({
					title: "订单提交中"
				})
				this.$axios({
					url: this.url,
					method: "post",
					data: {
						// id: this.form.id,
						type: this.params.packBuy,
						count: this.params.numSelect == 0 ? this.params.count : this.params.count * this.params
							.numSelect,
						province: this.province,
						city: this.city,
						area: this.area,
						address: this.address,
						name: this.name,
						phone: this.phone,
						groupGoodsId: this.params.groupGoodsId,
						specId: this.params.specSelect || '',
						lng: uni.getStorageSync("dingwei").longitude,
						lat: uni.getStorageSync("dingwei").latitude,
						payType: this.form.payWay == "wechat" ? 2 : 1
					}
				}).then((res) => {
					//这里取消遮罩，然后提示订单提交成功,再然后就跳转到支付页面，支付有微信支付和余额支付两种
					uni.hideLoading()
					console.log('emm', res);
					if (res.code == 0) {
						uni.showLoading({
							title: "订单提交中......"
						})
						//成功提交执行对应操作
						if (this.form.payWay == "balance") {
							uni.hideLoading()
							uni.showLoading({
									title: "余额支付中......"
								}),
								this.balancePay(res.result)
						} else {
							uni.showLoading({
									title: "微信支付中......"
								}),
								this.weChatPay(res.result)
						}
					}
				})
			},
			weChatPay(orderNum) {
				this.$axios({
					url: "wx/pay/createJsApiOrder",
					method: "post",
					data: {
						orderNum: orderNum,
						type: 2
					}
				}).then((response) => {
					let that = this
					if (response.code == 0) {
						uni.requestPayment({
							provider: 'wxpay', //支付类型-固定值
							timeStamp: response.result.timeStamp, // 时间戳（单位：秒）
							nonceStr: response.result.nonceStr, // 随机字符串
							package: response.result.packageValue, // 固定值
							signType: response.result.signType, //固定值
							paySign: response.result.paySign, //签名
							success: function(response) {
								uni.showToast({
									title: '支付成功！',
									icon: "none",
								})
								if (that.params.packBuy != 0) {
									that.dingyue()
								} else {
									uni.redirectTo({
										url: "/pageA/mine/bulkOrder"
									})
									uni.hideLoading()
								}
							},
							fail: function(err) {
								uni.hideLoading()
								uni.showToast({
									title: '支付失败,请在订单列表处重新支付',
									icon: "none",
									duration: 1000
								})
								setTimeout(() => {
									uni.redirectTo({
										url: "/pageA/mine/bulkOrder"
									})
								}, 1000)
							},
						});
					}
				})
			},
			// 余额支付
			balancePay(orderNum) {
				this.$axios({
					url: `user/usGroupGoodsOrder/balancePay`,
					method: "post",
					data: {
						orderNum: orderNum,
					}
				}).then((res) => {
					uni.hideLoading()
					if (res.code == 0) {
						uni.showToast({
							title: "支付成功!",
							icon: 'none',
							duration: 2000
						})
						if (this.params.packBuy != 0) {
							this.dingyue()
						} else {
							uni.redirectTo({
								url: '/pageA/mine/bulkOrder'
							})
							uni.hideLoading()
						}
					}
				})
			},
			dingyue() {
				//获取订阅消息权限
				uni.requestSubscribeMessage({
					//此处填写刚才申请模板的模板ID
					tmplIds: ['zihdFSPm2PxHZZPO5HUJkFTx3RtsWD1rxqzV5rtelLA'],
					complete(res) {
						//跳转到订单列表
						uni.redirectTo({
							url: "/pageA/mine/bulkOrder"
						})
						uni.hideLoading()
					},
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.imgList {
		display: flex;
		flex-direction: column;
	}

	.img {
		display: flex;
		height: 120rpx;
	}

	.lineAlone {
		margin-top: 90rpx !important;
	}

	.textDesc {
		text-decoration: none !important;
	}

	.icon_next {
		width: 30rpx;
		height: 30rpx;
		margin-top: 7rpx;
	}

	.icon {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
		margin-top: 10rpx;
	}

	.color {
		color: $theme-buy-color;
	}

	.plotAddressBorder {
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-top: 0.5rpx solid #eeeeee;
		padding: 18rpx 24rpx;

		.tit {
			font-size: 30rpx;
		}

		.tips {
			color: #949494;
			margin-left: 20rpx;
			font-size: 28rpx;
		}

		.price {
			font-weight: bold;
		}

		.iconfont {
			margin-right: 10rpx;
			background-color: $theme-buy-color;
			color: #fff;
			border-radius: 50%;
			padding: 10rpx;
			font-size: 25rpx;
		}

		.introTit {
			color: #949494;
			font-size: 28rpx;

			.introColor {
				color: $theme-buy-color;
				font-size: 35rpx;
			}
		}
	}

	.btnPop {
		border-radius: 100rpx;
		background-color: #86cc14;
		padding: 0rpx 100rpx;
		margin-right: 0;
		height: 100rpx;
		line-height: 100rpx;
	}

	.footer {
		width: 92%;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		height: 130rpx;
		padding: 0 30rpx;
		line-height: 130rpx;
	}

	.bot /deep/.uni-tag--warning {
		color: #93d22e !important;
		background-color: #f5ffe6 !important;
		border-color: #b8e176 !important;
	}

	.cot /deep/.uni-tag--warning {
		background-color: #86cc14 !important;
		border-color: #86cc14 !important;
	}

	.cot /deep/.uni-tag-text--small {
		font-size: 10px !important;
		vertical-align: middle !important;
		padding: 0 5rpx !important;
		margin-right: 5rpx;
	}

	.bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.bottom .tit {
		font-size: 32rpx;
		font-weight: bold;
	}

	/deep/.uni-steps__row-title {
		color: #fff !important;
		font-size: 15rpx;
	}

	/deep/.uni-icons {
		color: #fff !important;
	}

	/deep/.uni-steps__row-line {
		background-color: #fff !important;
	}

	/deep/.uni-steps__row-circle {
		background-color: #fff !important;
	}

	.box {
		padding: 30rpx;
		padding-bottom: 120rpx;
	}

	.back {
		position: absolute;
		z-index: -1;
		background-color: #86cc14;
		height: 450rpx;
		width: 100%;
		top: 0;
		left: 0;
		border-radius: 0 0 235rpx 116rpx;
	}

	.cont {
		background-color: #FFFFFE;
		border-radius: 25rpx;
		overflow: hidden;
		margin-bottom: 30rpx;

	}

	.cont .head {
		padding: 18rpx 24rpx;
		font-weight: 700;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.cont .head text {
		font-weight: bold;
		font-size: 30rpx;

	}

	.cont .head .right {
		font-size: 30rpx;
		font-weight: normal;
	}

	.cont .head image {
		width: 30rpx;
		height: 30rpx;
		vertical-align: middle;
	}

	/* .line {
		height: 3rpx;
		background-color: #eee;
	} */

	.cont .contBot {
		padding: 0 30rpx;
	}

	.contBot .leftImg {
		width: 150rpx;
		height: 150rpx;
		border-radius: 15rpx;
		overflow: hidden;
		position: absolute;
		border: 2rpx solid #eee;
	}

	.contBot .leftImg image {
		width: 100%;
		height: 100%;
	}

	.contBot .leftImg text {
		display: inline-block;
		color: #FFFFFE;
		background-color: #86cc14;
		position: absolute;
		top: -2px;
		left: 0px;
		font-size: 25rpx;
		padding: 0rpx 10rpx;
	}


	.contBot .rightCont {
		margin-left: 175rpx;
	}

	.contBot .rightCont .person {
		color: #aaaaaa;
		font-size: 30rpx;
		margin-bottom: 8rpx;
	}


	.rightCont .contPrice .price {
		font-size: 25rpx;
		text-decoration: line-through;
		display: inline-block;
		color: $theme-buy-color;
	}

	.rightCont .contPrice .price text {
		font-weight: bold;
		font-size: 38rpx;
		margin-right: 10rpx;
	}

	.rightCont .contPrice .bulkPrice {
		font-size: 26rpx;
		background: #86cc14;
		color: #fff;
		text-align: center;
		border-radius: 15rpx;
		width: 170rpx;
		display: inline-block;
		margin-left: 15rpx;
		padding: 5rpx 0;
	}

	.num {
		float: right;
		margin-top: -34rpx;
		color: #cccccc;
		font-size: 30rpx;
	}

	.rightCont .contPrice .bulkPrice text {
		font-size: 40rpx;
		font-weight: bold;
	}

	.bottomPrice {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.total {
		font-size: 36rpx;
	}

	.total text {
		color: $theme-buy-color;
		font-weight: bold;
		margin-left: 5rpx;
	}



	.bulkPerson {
		background: #fff;
		padding: 20rpx 30rpx;
		border-radius: 20rpx;
		margin-bottom: 30rpx
	}

	.bulkPerson .head {
		font-size: 35rpx;
		font-weight: bold;
	}

	.bulkPerson .head text {
		color: #87cc16;
	}

	.detailsBoxRight {
		width: 25%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}

	.bulkPerson image {
		width: 70rpx;
		height: 70rpx;
		margin-right: 25rpx;
		vertical-align: bottom;
		border: 2rpx solid #eee;
		border-radius: 50%;
	}

	.top {
		text-align: center;
		font-size: 30rpx;
		background: #f5ffe6;
		margin-bottom: 35rpx;
		height: 90rpx;
		line-height: 90rpx;
		color: #86cc14;
		border-radius: 30rpx;
	}

	.block {
		display: inline-block;
		width: 70rpx;
		height: 70rpx;
		color: #cccccc;
		background: #eeeeee;
		text-align: center;
		line-height: 70rpx;
		border-radius: 50%;
		border: 2rpx dashed;
		box-sizing: border-box;
	}

	.left-content {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.left-content .text {
		font-size: 30rpx;
		color: #a3a3a3;
	}

	.left-content text {
		display: inline-block;
		vertical-align: top;
		width: 85%;
		margin-left: 10rpx;
	}

	input {
		font-size: 30rpx;
		font-weight: normal;
		width: 200rpx;
	}
</style>
